<template>
  <div class="lix-edit">
    <radio-group class="radio-group lix-edit__radio-container" @change="radioChange">
      <label class="radio lix-edit__radio" v-for="(item, idx) in items" :key="idx">
        <radio :value="item.name" :checked="item.checked" color="#fd774d"/>{{item.value}}
      </label>
    </radio-group>

    <button @click="submit">保存</button>
  </div>
</template>

<script>
import { USER_SET_INFO } from '../../store/mutation-types';
import { mapGetters, mapActions } from 'vuex';
import Tip from '../../utils/tips';

export default {
  computed: {
    ...mapGetters('user', {
      marriage: 'marriage'
    })
  },
  data() {
    return {
      items: [
        {name: 1, value: '已婚', checked: 'true'},
        {name: 2, value: '未婚'}
      ],
      selectValue: 1
    };
  },
  onLoad() {
    if (this.marriage === 0) {
      return;
    }
    const items = this.items;
    items.map((curr) => {
      // eslint-disable-next-line
      if (curr.name == this.marriage) {
        curr['checked'] = 'true';
      } else {
        delete curr['checked'];
      }
    });
    this.items = items;
  },
  methods: {
    ...mapActions('user', {
      'changeUserInfo': USER_SET_INFO
    }),
    radioChange(e) {
      console.log(`radio发生change事件，携带value值为：`, e.mp.detail.value);
      const val = e.mp.detail.value;
      const items = this.items;
      items.map((curr) => {
        if (curr.name === parseInt(val, 10)) {
          curr['checked'] = 'true';
        } else {
          delete curr['checked'];
        }
      });
      this.items = items;
      this.selectValue = val;
    },
    submit(e) {
      this.changeUserInfo({
        params: {'marriage': this.selectValue},
        callback: function() {
          Tip.success('修改成功')
            .then(res => {
              wx.navigateBack();
            });
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "../../theme-chalk/mixins/mixins";
@import "../../theme-chalk/_main";
@include b(edit) {
  @include e(radio-container) {
    display: flex;
    flex-direction: column;
    padding: 20px;
  }
  @include e(radio) {
    height: 50px;
    font-size: 15px;
    color: #404040;
    border-bottom: 1rpx solid #f5f5f5;
    display: flex;
    align-items: center;
  }
  & button {
    border: none;
    margin: 0 20px;
    background-color: #fd774d;
    color: #fff;
    border-radius: 3px;
    font-size: 15px;
    height: 40px;
  }
}
</style>
